import React from 'react';
import { Tile1Props } from './interface';
import BorderBox1 from '../../BorderBox/BorderBox1/index';
import './index.less';
import Decoration1 from '../../Decoration/Decoration1';

const defaultProps: Tile1Props = {
  icon: undefined,
  kpiNameColor: '#0efcff',
  kpiNameFontSize: 20,
  kpiValueColor: '#e6de0a',
  kpiValueFontSize: 40,
  kpiList: [],
};

/**
 * tile 1
 * @author hupeng
 * @datetime 2021-3-23 22:02
 */
const Tile1: React.FC<Tile1Props> & {
  defaultProps: Partial<Tile1Props>;
} = props => {
  const {
    icon,
    kpiNameColor,
    kpiNameFontSize,
    kpiValueColor,
    kpiValueFontSize,
    kpiList,
  } = props;

  const renderKpiItem = () => {
    return kpiList
      ? kpiList.map(kpiItem => {
          const { kpiName, kpiValue, kpiUnit } = kpiItem;
          return (
            <div className="tile-kpi-main">
              <div
                className="tile-kpi-name"
                style={{ color: kpiNameColor, fontSize: kpiNameFontSize }}
              >
                {kpiName}
              </div>
              <div
                className="tile-kpi-value"
                style={{ color: kpiValueColor, fontSize: kpiValueFontSize }}
              >
                {kpiValue}
                {kpiUnit}
              </div>
            </div>
          );
        })
      : null;
  };

  return (
    <div className="dv-tile-1">
      <BorderBox1 style={{ position: 'absolute' }} />

      <div className="tile-kpi-content">
        <Decoration1 borderWidth={88} style={{ margin: '0 22px 0 38px' }}>
          {icon}
        </Decoration1>

        {renderKpiItem()}
      </div>
    </div>
  );
};

Tile1.defaultProps = defaultProps;

export default Tile1;
